<!--
  #%L
  thinkbig-ui-feed-manager
  %%
  Copyright (C) 2017 ThinkBig Analytics
  %%
  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at
  
      http://www.apache.org/licenses/LICENSE-2.0
  
  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
  #L%
  -->
<ng-form name="vm.dataProcessingForm">
  <div layout="row">


    <card-layout body-css="md-padding" flex="70">
      <header-section>
        <div layout="row" layout-align="space-between-center" flex>
          <div class="card-title" flex>Data Processing</div>
          <h2 class="card-sub-header">{{vm.stepNumber}} of {{vm.totalSteps}}</h2>
        </div>
        <div layout="row" layout-align="space-between-center" flex class="layout-padding-top">
          <div class="card-sub-header" flex>Define field validation, standardization, and cleansing policies</div>
          <thinkbig-feed-errors-card-header></thinkbig-feed-errors-card-header>
        </div>

      </header-section>
      <body-section md-content class="data-processing">

        <md-expansion-panel-group>
          <md-expansion-panel md-component-id="panelFieldPolicies">
            <md-expansion-panel-collapsed>
              <div flex class="md-subhead layout-padding-top">
                <span>Choose field policies </span>
              </div>
              <md-button aria-label="Expand panel" class="md-info" ng-click="$panel.collapse()">Expand</md-button>
            </md-expansion-panel-collapsed>
            <md-expansion-panel-expanded>
              <md-expansion-panel-header md-no-sticky>
                <div class="md-subhead layout-padding">Field Policies</div>
              </md-expansion-panel-header>
              <md-expansion-panel-content>
                <md-list layout-fill class="list-item-table list-condensed" id="policy-list">

                  <md-list-item>
                    <div layout="row" layout-fill>
                      <div flex="30" class="md-list-item-text hint">
                        Field Name
                      </div>
                      <div flex="20" class="md-list-item-text hint" style="padding-left:5px;">
                        Domain Type
                      </div>
                      <div flex="10" class="md-list-item-text hint" layout="column" layout-align="start center">
                        Index
                        <md-tooltip md-direction="top">
                          Specifies fields available for global indexing for search and discovery
                        </md-tooltip>
                        <md-input-container class="md-block" flex-gt-sm>
                          <md-checkbox aria-label="Select All"
                                       ng-checked="vm.indexCheckAll.isChecked"
                                       md-indeterminate="vm.indexCheckAll.isIndeterminate"
                                       ng-click="vm.indexCheckAll.toggleAll()"></md-checkbox>
                        </md-input-container>
                      </div>
                      <div flex="10" class="md-list-item-text hint" layout="column" layout-align="start center">
                        Profile
                        <md-tooltip md-direction="top">
                          Should this field be profiled?
                        </md-tooltip>
                        <md-input-container class="md-block" flex-gt-sm>
                          <md-checkbox aria-label="Select All"
                                       ng-checked="vm.profileCheckAll.isChecked"
                                       md-indeterminate="vm.profileCheckAll.isIndeterminate"
                                       ng-click="vm.profileCheckAll.toggleAll()">
                          </md-checkbox>
                        </md-input-container>
                      </div>
                      <div flex="30" class="md-list-item-text hint" style="padding-left:5px;">
                        Standardize & Validate
                      </div>
                    </div>
                  </md-list-item>
                  <div layout="row" layout-fill flex>
                    <span class="data-processing-divider" style="margin-top:-10px;" layout-fill flex>
                      <md-divider style="border-top-color:grey"></md-divider>
                    </span>
                  </div>
                  <div id="define-feed-data-processing-container">
                    <md-virtual-repeat-container
                        class="virtual-repeat-scroller-overlay"
                        ng-if="vm.model.table.fieldPolicies.length >= 30"
                        style="min-height: 700px">
                        <div
                            class="repeated-item"
                            md-virtual-repeat="policy in vm.model.table.fieldPolicies"
                            ng-show="!vm.model.table.tableSchema.fields[$index].deleted"
                            ng-click="vm.onSelectedColumn($index)">
                          <span style="display: none"></span> <!-- for whatever reason, the following ng-include is not displayed without displaying something here -->
                          <ng-include
                              layout="row"
                              layout-align="start center"
                              class="data-processing-row"
                              src="'js/feed-mgr/feeds/define-feed/feed-details/define-feed-data-processing-row.html'">
                          </ng-include>
                        </div>
                    </md-virtual-repeat-container>
                    <div ng-if="vm.model.table.fieldPolicies.length > 0 && vm.model.table.fieldPolicies.length < 30">
                      <ng-include
                          layout="row"
                          layout-align="start center"
                          ng-repeat="policy in vm.model.table.fieldPolicies"
                          ng-show="!vm.model.table.tableSchema.fields[$index].deleted"
                          ng-click="vm.onSelectedColumn($index)"
                          class="data-processing-row"
                          src="'js/feed-mgr/feeds/define-feed/feed-details/define-feed-data-processing-row.html'">
                      </ng-include>
                    </div>
                  </div>
                </md-list>
              </md-expansion-panel-content>
              <md-expansion-panel-footer md-no-sticky>
                <div flex></div>
                <md-button class="md-warn" aria-label="Collapse panel" ng-click="$panel.collapse()">Collapse</md-button>
              </md-expansion-panel-footer>
            </md-expansion-panel-expanded>
          </md-expansion-panel>

          <md-expansion-panel md-component-id="panelMergeStrategy">
            <md-expansion-panel-collapsed>
              <div flex class="md-subhead layout-padding-top">
                <span>Choose merge strategy </span>
              </div>
              <md-button aria-label="Expand panel" class="md-info" ng-click="$panel.collapse()">Expand</md-button>
            </md-expansion-panel-collapsed>
            <md-expansion-panel-expanded>
              <md-expansion-panel-header md-no-sticky>
                <div class="md-subhead layout-padding">Merge strategy</div>
              </md-expansion-panel-header>
              <md-expansion-panel-content>
                <md-input-container class="md-block layout-padding-top-bottom flex-gt-sm condensed" flex-gt-sm="" style="">
                  <label class="label-small md-container-ignore">Merge Strategy</label>
                  <md-radio-group ng-model="vm.model.table.targetMergeStrategy" layout="row" layout-wrap="true" class="layout-padding-top" name="targetMergeStrategy"
                                  ng-change="vm.onChangeMergeStrategy()">
                    <md-radio-button ng-repeat="strategy in vm.mergeStrategies"
                                     ng-value="strategy.type"
                                     aria-label="{{strategy.name}}"
                                     ng-disabled="strategy.disabled">
                      {{strategy.name}}
                      <div class="hint">{{strategy.hint}}</div>
                    </md-radio-button>
                  </md-radio-group>
                  <div ng-messages="vm.dataProcessingForm['targetMergeStrategy'].$error" md-auto-hide="false">
                    <div ng-message="invalidPKOption">A primary key must be selected to use this strategy</div>
                    <div ng-message="invalidRollingSyncOption">A Partition must be added to use this strategy</div>
                  </div>

                </md-input-container>
              </md-expansion-panel-content>
              <md-expansion-panel-footer md-no-sticky>
                <div flex></div>
                <md-button class="md-warn" aria-label="Collapse panel" ng-click="$panel.collapse()">Collapse</md-button>
              </md-expansion-panel-footer>
            </md-expansion-panel-expanded>
          </md-expansion-panel>


          <md-expansion-panel md-component-id="panelTargetFormat">
            <md-expansion-panel-collapsed>
              <div flex class="md-subhead layout-padding-top">
                <span>Choose target format </span>
              </div>
              <md-button aria-label="Expand panel" class="md-info" ng-click="$panel.collapse()">Expand</md-button>
            </md-expansion-panel-collapsed>
            <md-expansion-panel-expanded>
              <md-expansion-panel-header md-no-sticky>
                <div class="md-subhead layout-padding">Target Format</div>
              </md-expansion-panel-header>
              <md-expansion-panel-content>


                <md-input-container class="md-block layout-padding-top-bottom flex-gt-sm condensed" flex-gt-sm="" style="">
                  <label class="label-small md-container-ignore">Target Format</label>
                  <md-select ng-model="vm.model.table.targetFormat" ng-change="vm.onTableFormatChange(opt);">
                    <md-option ng-repeat="opt in vm.targetFormatOptions track by $index" ng-value="opt.value">
                      {{opt.label}}
                    </md-option>
                  </md-select>
                </md-input-container>


                <md-input-container class="md-block layout-padding-top-bottom flex-gt-sm condensed" flex-gt-sm="" style="">
                  <label class="label-small md-container-ignore">Compression Options</label>
                  <md-select ng-model="vm.model.table.options.compressionFormat">
                    <md-option ng-repeat="opt in vm.compressionOptions track by $index" ng-value="opt">
                      {{opt}}
                    </md-option>
                  </md-select>
                </md-input-container>

              </md-expansion-panel-content>
              <md-expansion-panel-footer md-no-sticky>
                <div flex></div>
                <md-button class="md-warn" aria-label="Collapse panel" ng-click="$panel.collapse()">Collapse</md-button>
              </md-expansion-panel-footer>
            </md-expansion-panel-expanded>
          </md-expansion-panel>
        </md-expansion-panel-group>

        <thinkbig-step-buttons can-continue="vm.isValid" step-index="{{::vm.stepIndex}}"></thinkbig-step-buttons>

      </body-section>

    </card-layout>

    <card-layout flex="30" body-css="md-padding" ng-if="vm.selectedColumn != null" sticky scroll-selector="#content" style="width:100%;right:10px;" id="selectedColumnPanel2">

      <header-section>
        <div class="card-title" flex>Field Details</div>
        <div layout="column" class="layout-padding-top-bottom">
          <span class="item-title orange">{{vm.selectedColumn.name}}</span>
        </div>
      </header-section>

      <body-section>
        <div layout="column" class="layout-padding-top-bottom">
          <span>Sample field values</span>
          <span class="hint"> <md-input-container class="md-block condensed" flex-gt-sm>
                      <md-select ng-model="vm.selectedColumn.selectedSampleValue" placeholder="Preview Data">
                        <md-option ng-repeat="data in vm.selectedColumn.sampleValues | unique" value="{{data}}" aria-label="{{data}}">
                          {{data}}
                        </md-option>
                      </md-select>
                    </md-input-container></span>
        </div>

        <div layout="column" class="layout-padding-top">
          <div layout="column" class="layout-padding-top-bottom">
            <span>Field Description</span>
            <textarea ng-model="vm.selectedColumn.description" rows="5" md-select-on-focus="" maxlength="256"></textarea>
          </div>
        </div>

        <md-input-container class="md-block layout-padding-top-bottom flex-gt-xs" flex-gt-xs>
          <label class="label-small md-container-ignore">Tags</label>
          <md-chips ng-model="vm.selectedColumn.tags" md-autocomplete-snap md-transform-chip="vm.transformChip($chip)" md-require-match="false">
            <md-autocomplete md-selected-item="vm.tagChips.selectedItem" md-search-text="vm.tagChips.searchText" md-items="item in vm.feedTagService.querySearch(tagChips.searchText)"
                             md-item-text="item.name" placeholder="Add a Tag">
              <span md-highlight-text="vm.tagChips.searchText">{{item.name}}</span>
            </md-autocomplete>
            <md-chip-template>
              <span>
                <strong>{{$chip.name}}</strong>
              </span>
            </md-chip-template>
          </md-chips>
        </md-input-container>

        <div layout="column" class="layout-align-start-start layout-padding-top-bottom">
          <md-button aria-label="Remove field" ng-click="vm.removeColumnUsingReference(vm.selectedColumn)" aria-label="Remove Field"
                     ng-if="!vm.tableLocked && vm.model.table.method != 'SAMPLE_FILE'">Remove
          </md-button>
        </div>
      </body-section>
    </card-layout>
  </div>
</ng-form>
